$direction: top, right, bottom, left;
$num: 1;
$sum: 30;
$step: 2rpx;

$border-size : 2rpx;

page{
    --white:#fff;
    --black:#000;
}
$bg-colors: (
    'primary':var(--primary),
    'white':var(--white),
    'black':var(--black),
	'eee':#eee,
	'999':#999
);

$text-colors:(
    '333':#333,
    '666':#666,
    '999':#999,
	'D4':#D4D4D4,
	'41230B':#41230B,
	'blue-1':#1F83FE,
    'white':var(--white),
    'black':var(--black)
);

$border-colors:(
'black':var(--black),
'primary':var(--primary),
'eee':#eee,
'999':#999
);

page {
    @each $color-name, $color-value in $bg-colors {
        --bg-#{$color-name}: $color-value;
        .bg-#{$color-name} {
            background-color: $color-value;
        }
    }

    @each $color-name, $color-value in $text-colors {
        --text-#{$color-name}: $color-value;
        .text-#{$color-name} {
            color: $color-value;
        }
    }

    @each $color-name, $color-value in $border-colors {
        --border-#{$color-name}: $color-value;
        @each $i in $direction {
            .border-#{$color-name}{
                border: $border-size solid $color-value;
            }
            .border-#{$i}-#{$color-name} {
                border-#{$i}: $border-size solid $color-value;
            }
        }
    }
  
   
}


.mx-auto,
.ml-auto {
    margin-left: auto !important;
}


.mx-auto,
.mr-auto {
    margin-right: auto !important;
}


.py-safe-area,
.pb-safe-area {
    padding-bottom: constant(safe-area-inset-bottom) !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
}

.py-safe-area,
.pt-safe-area {
    padding-top: constant(safe-area-inset-top) !important;
    padding-top: env(safe-area-inset-top) !important;
}

.round-circle {
    border-radius: 50% !important;
}


@while $num < ($sum + 1) {

    .p-#{$num},
    .pl-#{$num},
    .px-#{$num} {
        padding-left: $step * $num !important;
    }

    .p-#{$num},
    .pr-#{$num},
    .px-#{$num} {
        padding-right: $step * $num !important;
    }

    .p-#{$num},
    .pt-#{$num},
    .py-#{$num} {
        padding-top: $step * $num !important;
    }

    .p-#{$num},
    .pb-#{$num},
    .py-#{$num} {
        padding-bottom: $step * $num !important;
    }

    .m-#{$num},
    .ml-#{$num},
    .mx-#{$num} {
        margin-left: $step * $num !important;
    }

    .m-#{$num},
    .mr-#{$num},
    .mx-#{$num} {
        margin-right: $step * $num !important;
    }

    .m-#{$num},
    .mt-#{$num},
    .my-#{$num} {
        margin-top: $step * $num !important;
    }

    .m-#{$num},
    .mb-#{$num},
    .my-#{$num} {
        margin-bottom: $step * $num !important;
    }


    .top-#{$num} {
        top: $step * $num !important;
    }

    .left-#{$num} {
        left: $step * $num !important;
    }

    .right-#{$num} {
        right: $step * $num !important;
    }

    .bottom-#{$num} {
        bottom: $step * $num !important;
    }

    .top--#{$num} {
        top: -$step * $num !important;
    }

    .left--#{$num} {
        left: -$step * $num !important;
    }

    .right--#{$num} {
        right: -$step * $num !important;
    }

    .bottom--#{$num} {
        bottom: -$step * $num !important;
    }

    .w-#{$num} {
        width: $num * $step !important;
    }

    .w-#{$num * 10} {
        width: $num * 10 * $step !important;
    }


    .h-#{$num } {
        height: $num * $step !important;
    }

    .h-#{$num * 10} {
        height: $num * $step * 10 !important;
    }

    // .lh-#{$num} {
    //     line-height: $num * $step !important;
    // }

    @if $num<31 and $num%2==0 {

        .round-#{$num },
        .round-left-#{$num },
        .round-bottom-#{$num },
        .round-bottom-left-#{$num } {
            border-bottom-left-radius: $num * $step !important;
        }

        .round-#{$num },
        .round-left-#{$num },
        .round-top-#{$num },
        .round-top-left-#{$num } {
            border-top-left-radius: $num * $step !important;
        }

        .round-#{$num },
        .round-right-#{$num },
        .round-bottom-#{$num },
        .round-bottom-right-#{$num } {
            border-bottom-right-radius: $num * $step !important;
        }

        .round-#{$num },
        .round-right-#{$num },
        .round-top-#{$num },
        .round-top-right-#{$num } {
            border-top-right-radius: $num * $step !important;
        }
    }

    @if $num>7 {
        .fs-#{$num} {
            font-size: $num * $step !important;
        }
    }

    $num: $num + 1;
}


.flex {
    display: flex;

    @each $var in wrap,
    nowrap {
        &-#{$var} {
            flex-wrap: $var;
        }
    }

    @each $var in column,
    row {
        &-#{$var} {
            flex-direction: $var;
        }
    }

    @each $var in center,
    baseline,
    flex-start,
    flex-end {
        &-y-#{$var} {
            align-items: $var;
        }
    }

    @each $var in center,
    flex-start,
    flex-end,
    space-around,
    space-between,
    space-evenly {
        &-x-#{$var} {
            justify-content: $var;
        }
    }

    @for $num from 1 through 12 {
        &-#{$num } {
            flex: $num ;
            min-width: 0;
        }
    }

    &-center {
        align-items: center;
        justify-content: center;
    }
}



@each $var in relative,
absolute,
fixed,
sticky {
    .position-#{$var} {
        position: $var;
    }
}

[class*="grid-columns-"] {
    display: grid;
}

.grid {
    display: grid;
    grid-template-columns: repeat(24, minmax(0px, 1fr));

    @for $i from 1 through 23 {
        &-columns-#{$i} {
            grid-template-columns: repeat($i, minmax(0px, 1fr));
        }
    }

    @for $i from 1 through 12 {

        &-gap-#{$i} {
            gap: $step * $i !important;
        }
    }

    @for $i from 1 through 24 {
        &-column-#{$i} {
            grid-column: span $i / span $i;
        }
    }
}


.line-height {
    line-height: 1;
    @for $i from 0 through 10 {
        &-#{$i} {
            line-height: 20px + ($i * 2px);
        }
    }
}

.fw {
    &-bold {
        font-weight: bold;
    }

    &-normal {
        font-weight: normal;
    }

    @for $i from 1 through 9 {
        &-#{$i * 100} {
            font-weight: $i * 100;
        }
    }
}


@each $i in hidden,
visible,
auto,
scroll {
    .overflow-#{$i},
    .overflow-x-#{$i} {
        overflow-x: $i;
    }

    .overflow-#{$i},
    .overflow-y-#{$i} {
        overflow-y: $i;
    }
}

.grow-1 {
    width: 0;
    flex-grow: 1;
}

.text {
    @each $var in nowrap,
    wrap {
        &-#{$var} {
            white-space: $var;
        }
    }

    @each $var in break-all,
    break-word,
    keep-all {
        &-#{$var} {
            word-break: $var;
        }
    }

    @for $i from 1 through 5 {
        &-ellipsis-#{$i} {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: $i;
            -webkit-box-orient: vertical;
        }
    }

    @for $i from 1 through 10 {
        &-spacing-#{$i} {
            word-spacing: $i * 0.53333vw;
        }
    }

    @each $var in left,
    center,
    right,
    initial {
        &-#{$var} {
            text-align: $var;
        }
    }

    @each $var in capitalize,
    uppercase,
    lowercase {
        &-#{$var} {
            text-transform: $var;
        }
    }

    &-s {
        text-decoration: line-through;
    }
}



@for $i from 1 through 20 {
    .w-p-#{$i*5} {
        width: $i * 5%;
    }

    .h-p-#{$i*5} {
        height: $i * 5%;
    }

    .vw-#{$i*5} {
        width: $i * 5vw;
    }

    .vh-#{$i*5} {
        height: $i * 5vh;
    }
}

.box-sizing {
    box-sizing: border-box;
}

.block {
    display: inline-block;
}

.flex-shrink{
	flex-shrink:0;
}